<!--
 * @Author: caiwenfeng
 * @Date: 2024-05-13 10:25:55
 * @LastEditors: caiwenfeng
 * @LastEditTime: 2025-06-21 15:13:33
 * @Description: 悬浮按钮
-->
<template>
  <view
    class="u-fab"
    @touchstart.stop.prevent="handleTouchStart"
    @touchmove.stop.prevent="handleTouchmove"
    @touchend.stop.prevent="handleTouchend"
    :style="{
      bottom: `${position.bottom * 2}rpx`,
      right: `${position.right * 2}rpx`,
      color: color,
      background: background,
    }"
    @click="$emit('click')"
  >
    <text class="badge" v-if="num">{{ num }}</text>
    <i
      v-if="icon.indexOf('icon-') !== -1"
      class="iconfont"
      :class="icon"
      :style="{ fontSize: `${size * 2}rpx` }"
    ></i>
    <uni-icons
      v-else
      :type="icon"
      :color="color"
      :style="{ fontSize: `${size * 2}rpx` }"
    ></uni-icons>
    <text>{{ text }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
defineOptions({
  name: 'u-fab',
});
const props = defineProps({
  icon: {
    // 可支持uniapp的图标，以及iconfont的图标
    default: 'plusempty',
    type: String,
  },
  text: {
    default: '',
    type: String,
  },
  size: {
    type: Number,
    default: 30,
  },
  color: {
    default: '#555',
    type: String,
  },
  num: {
    type: Number,
    default: 0,
  },
  background: {
    default: '#fae358',
    type: String,
  },
});
const position = ref({
  bottom: 120,
  left: 0
});
let downEvent = {
  clientX: 0,
  clientY: 0,
};
let isMoving = false;
const emit = defineEmits(['click']);

let windowInfo = {};
// 鼠标按下事件
const handleTouchStart = (e) => {
  console.log(1);
  const { clientX, clientY } = e.changedTouches[0];
  downEvent.clientX = clientX;
  downEvent.clientY = clientY;
};

// 移动事件
const handleTouchmove = (e) => {
  const { clientX, clientY } = e.changedTouches[0];
  const { clientX: x, clientY: y } = downEvent;
  const moveX = (x - clientX).toFixed(2);
  const moveY = (y - clientY).toFixed(2);
  if (Math.abs(moveX) < 5 && Math.abs(moveY) < 5) {
    return;
  }
  isMoving = true;
  position.value.bottom += Number(moveY);
  position.value.right += Number(moveX);
  // 边界值校验
  if (position.value.bottom < 0) {
    position.value.bottom = 0;
  }
  if (position.value.right < 0) {
    position.value.right = 0;
  }
  if (position.value.right > windowInfo.windowWidth - 95) {
    position.value.right = windowInfo.windowWidth - 95;
  }
  if (position.value.bottom > windowInfo.windowHeight - 190) {
    position.value.bottom = windowInfo.windowHeight - 190;
  }
  downEvent.clientX = clientX;
  downEvent.clientY = clientY;
};
// 鼠标弹起事件
const handleTouchend = () => {
  if (isMoving) {
    isMoving = false;
    return;
  }
  emit('click');
};

onMounted(() => {
  windowInfo = uni.getWindowInfo(); // 获取设备可视区域的数据
});
</script>

<style lang="scss" scoped>
.u-fab {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  color: $color-primary;
  font-size: 20rpx;
  position: fixed;
  background-color: #fff;
  text {
    font-size: 20rpx;
  }
  .badge {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    font-size: 24rpx;
    color: #fff;
    background: #fe3a15;
    border-radius: 50%;
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
  }
}
</style>
